<template>
  <div class="nav-first-container" v-show="loading" id="docDetail">
    <div :class="lastOne.pertype == '5'?'bg-grey':'bg-grey padding-b-54'" >
        <div class="head-info">
          <van-row>
            <van-col :span="4" @click="checkIdCard(apps.uid)">
              <template v-if="apps.pic">
                <van-image class="head-img" radius="4px" :src="`${$common.filePath}${apps.pic}`"/>
              </template>
              <template v-else>
                <img class="head-img" src="../../assets/notification/head.png">
              </template>
            </van-col>
            <van-col :span="18" class="head-right margin-l-15">
              <p class="head-title van-ellipsis">{{apps.name}}-{{apps.tpltitle}}</p>
              <p class="head-desc van-ellipsis flex-row">
                <span>发起时间：{{apps.date}}</span>
              </p>
              <p class="font-color">{{apps.type == "1"?'已撤销':''}}</p>
            </van-col>
          </van-row>
        </div>
        <div class="margin-t-10">
          <van-cell-group :border="false" class="padding-tb-10">
            <van-cell title="标题" :value="apps.title" title-class="cell-left" value-class="cell-right" />
          </van-cell-group>
          <van-cell-group :border="false" v-for="(formItem, index) in forms" :key="index" class="padding-tb-10">
            <!-- 附件 -->
            <template v-if="formItem.inputtype == '2'">
              <van-cell :title="formItem.fromname" title-class="cell-left" value-class="cell-right" >
                <template slot="default">
                  <div v-if="formItem.inputvalue" v-for="(file,index) in formItem.inputvalue" class="form-file" :key="index" @click="preview(file)">
                    <img class="img-class" :src="$common.fileIcon(fileName(file, 'type'))">
                    <p class="van-multi-ellipsis--l2 ">
                      {{ fileName(file, 'fullName') }}
                    </p>
                  </div>
                </template>
              </van-cell>
            </template>
            <!-- 其余 -->
            <template v-else>
              <van-cell :title="formItem.fromname" :value="formItem.inputvalue" title-class="cell-left" value-class="cell-right" />
            </template>
          </van-cell-group>
          <!-- 公文正文 -->
          <van-cell-group :border="false"  class="padding-tb-10">
            <van-cell title="正文" title-class="cell-left" value-class="cell-right" >
              <template slot="default">
                <van-button v-if="apps.editor_content" type="info" size="small" plain @click="previewContent">点击查看</van-button>
              </template>
            </van-cell>
          </van-cell-group>
        </div>

        <!-- 流程附件 -->
        <template v-if="attachmentShow">
          <p class="progress">流程附件</p>
          <div class="attachment-class" v-for="(files, stepIndex) in stepData" :key="stepIndex" v-if="stepIndex == 0">
            <template v-if="files.file.length > 0">
              <p v-for="(att, attIndex) in files.file" :key="attIndex" @click.stop="previewComFile(att.fileaddr,att.filename)" class="file-flex margin-b-10">
                <img class="step-img" :src="$common.fileIcon(fileName(att.fileaddr, 'type'))">
                <span class="step-width van-ellipsis">{{att.filename}}</span>
              </p>
            </template>
            <template v-else>
              <p style="font-size: 14px;color: #333333;">没有附件！</p>
            </template>
          </div>
        </template>

        <p class="progress">流程办理进度</p>
        <div class="steps-container">
          <div class="steps" v-for="(res, index) in stepData" :key="`${index}流程`">
            <!-- pertype 3退回  0办理中  4等待办理中 1通过 2拒绝 5结束-->
            <!-- <div :class="(res.pertype == '0' || res.pertype == '4')?'step-circle':'step-circle circle-active'">{{res.list.flownum}}</div> -->
            <!-- 单人头像 -->
            <template v-if="res.appkey == '2'">
              <div class="flow-img" @click="checkIdCard(res.entrustid?res.entrustid:res.uid)">
                <template v-if="res.pic">
                  <van-image class="process-border-img" radius="4px" :src="`${$common.filePath}${res.pic}`"/>
                </template>
                <template v-else>
                   <img class="process-img" src="../../assets/notification/head.png">
                </template>
              </div>
            </template>
            <!-- 多人审批 头像 -->
            <template v-if="res.appkey == '1'">
              <div class="flow-img">
                <img class="process-img" src="../../assets/notification/head-group.png">
              </div>
            </template>
            <div class="step-line"></div>
            <div class="step-right">
                <!-- 单人审批 -->
                <template v-if="res.query.length <= 0">
                  <h3 class="step-title-class">
                    <van-col :span="18">
                      <span class=" van-multi-ellipsis--l3">
                        {{res.list.flowname}}{{'(主办：'+ res.name }}
                        <!-- {{!!res.actf_name?'；会签：' + res.actf_name : ''}} -->
                        {{!!res.entrust?'；委托：'+ res.entrust +')' : ')'}}
                      </span>
                    </van-col>
                    <van-col :span="7" class="align-right">
                      <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                    </van-col>
                  </h3>
                  <!-- 单人审批 会签 -->
                  <div v-for="(actf,index) in res.actf" :key="`${index}单会签`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#F5A703" class="margin-r-10">会签人</van-tag>{{ actf.name }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(actf.pertype)">{{getTypename(actf.pertype)}}</span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{actf.approvaldate}}</p>
                    <div class="step-container" >
                      <p v-if="actf.lnstructions" >{{actf.lnstructions}}</p>
                      <p class="step-file" v-if="actf.file.length > 0" v-for="(file,inindex) in actf.file" :key="inindex" @click="previewComFile(file.fileaddr,file.filename)">
                        <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                        <span class="step-width van-ellipsis">{{ file.filename }}</span>
                      </p>
                    </div>
                    <!-- 会签 的传阅 -->
                    <div v-for="(read,index) in actf.read" :key="`传阅${index}`" class="margin-t-15">
                      <h4 class="step-title-class">
                        <van-col :span="24">
                          <span class="van-multi-ellipsis--l2 normal-flex">
                            <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}<span style="font-size: 14px;color: #999999;">（{{actf.name}}分阅）</span>
                          </span>
                        </van-col>
                      </h4>
                      <p class="step-time-class">{{read.approvaldate}}</p>
                      <div class="step-container">
                        <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 主办和委托是互斥关系，有主办就显示，有委托就不显示主办 -->
                  <template v-if="!res.entrust">
                    <div v-if="res.actf && res.actf.length > 0" class="margin-t-15">
                      <h4 class="step-title-class ">
                        <van-col :span="17">
                          <span class="van-multi-ellipsis--l2 normal-flex">
                            {{ res.name }}
                          </span>
                        </van-col>
                        <van-col :span="7" class="align-right">
                          <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                        </van-col>
                      </h4>
                    </div>
                  </template>
                  <template v-else>
                    <div v-if="res.actf && res.actf.length > 0" class="margin-t-15">
                      <h4 class="step-title-class ">
                        <van-col :span="17">
                          <span class="van-multi-ellipsis--l2 normal-flex">
                            <van-tag plain color="#F5A703" class="margin-r-10">委托</van-tag>{{ res.entrust }}
                          </span>
                        </van-col>
                        <van-col :span="7" class="align-right">
                          <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                        </van-col>
                      </h4>
                    </div>
                  </template>
                  <p class="step-time-class">{{res.approvaldate}}</p>
                  <div class="step-container q">
                    <p v-if="res.lnstructions">{{res.lnstructions}}</p>
                    <!-- 第一步的附件显示在公共附件区，这里不显示 -->
                    <p class="step-file" v-if="res.file.length > 0 && index > 0"  v-for="(file,fileindex) in res.file" :key="fileindex" @click="previewComFile(file.fileaddr,file.filename)">
                      <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                      <span class="step-width van-ellipsis">{{file.filename}}</span>
                    </p>
                  </div>
                  <!-- 传阅 -->
                  <div v-for="(read,index) in res.read" :key="`传阅2${index}`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="24">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}
                          <span style="font-size: 14px;color: #999999;">（{{res.name || res.entrust}}分阅）</span>
                        </span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{read.approvaldate}}</p>
                    <div class="step-container">
                      <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                    </div>
                  </div>
                </template>
                <!-- 多人审批 -->
                <template v-else>
                  <h3 class="step-title-class">
                    <van-col :span="17">
                      <span class="van-multi-ellipsis--l3">
                        {{res.list.flowname}}{{'(主办：'+ res.name }}
                        <!-- {{!!res.actf_name?'；会签：' + res.actf_name : ''}} -->
                        {{!!res.entrust?'；委托：'+res.entrust +')' : ')'}}
                      </span>
                    </van-col>
                    <van-col :span="7" class="align-right">
                      <span :class="getTypeclass(res.pertype)">{{getTypename(res.pertype)}}</span>
                    </van-col>
                  </h3>
                  <!-- 会签 -->
                  <div v-for="(actf,index) in res.actf" :key="`${index}多会签`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2 normal-flex">
                          <van-tag plain color="#F5A703" class="margin-r-10">会签人</van-tag>{{ actf.name }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(actf.pertype)">{{getTypename(actf.pertype)}}</span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{actf.approvaldate}}</p>
                    <div class="step-container" >
                      <p v-if="actf.lnstructions">{{actf.lnstructions}}</p>
                      <p class="step-file" v-if="actf.file.length > 0"  v-for="(file,index) in actf.file" :key="`${index}会签附件`" @click="previewComFile(file.fileaddr,file.filename)">
                        <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                        <span class="step-width van-ellipsis">{{file.filename}}</span>
                      </p>
                    </div>
                    <!-- 会签 的传阅 -->
                    <div v-for="(read,index) in actf.read" :key="`多人审批传阅${index}`" class="margin-t-15">
                      <h4 class="step-title-class">
                        <van-col :span="24">
                          <span class="van-multi-ellipsis--l2 normal-flex">
                            <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}<span style="font-size: 14px;color: #999999;">（{{actf.name}}分阅）</span>
                          </span>
                        </van-col>
                      </h4>
                      <p class="step-time-class">{{read.approvaldate}}</p>
                      <div class="step-container">
                        <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 多人主办 -->
                  <div v-for="(query,index) in res.query" :key="`${index}多人`" class="margin-t-15">
                    <h4 class="step-title-class">
                      <van-col :span="17">
                        <span class="van-multi-ellipsis--l2">
                          {{ query.name }}
                        </span>
                      </van-col>
                      <van-col :span="7" class="align-right">
                        <span :class="getTypeclass(query.pertype)">{{getTypename(query.pertype)}}</span>
                      </van-col>
                    </h4>
                    <p class="step-time-class">{{query.approvaldate}}</p>
                    <div class="step-container m" >
                      <p v-if="query.lnstructions">{{query.lnstructions}}</p>
                      <p class="step-file" v-if="query.file.length > 0" v-for="(file,index) in query.file" :key="`${index}附件`" @click="previewComFile(file.fileaddr,file.filename)">
                        <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                        <span class="step-width van-ellipsis">{{file.filename}}</span>
                      </p>
                    </div>
                    <!-- 会签 的传阅 -->
                    <div v-for="(read,index) in query.read" :key="`多人主办传阅${index}`" class="margin-t-15">
                      <h4 class="step-title-class">
                        <van-col :span="24">
                          <span class="van-multi-ellipsis--l2 normal-flex">
                            <van-tag plain color="#82AFFF" class="margin-r-10">接收人</van-tag>{{ read.name }}<span style="font-size: 14px;color: #999999;">（{{query.name}}分阅）</span>
                          </span>
                        </van-col>
                      </h4>
                      <p class="step-time-class">{{read.approvaldate}}</p>
                      <div class="step-container">
                        <p v-if="read.lnstructions" >{{read.lnstructions}}</p>
                      </div>
                    </div>
                  </div>
                  <!-- 公共附件 -->
                  <!-- <div class="step-container s" v-if="res.file.length > 0">
                    <p class="step-file" :class="res.file.length > 0?'file-t-10':''" v-if="res.file.length > 0 && index > 0" v-for="(file,inindex) in res.file" :key="inindex" @click="previewComFile(file.url,file.filename)">
                      <img class="step-img" :src="$common.fileIcon(fileName(file.fileaddr, 'type'))">
                      <span class="step-width van-ellipsis">{{ file.filename }}</span>
                    </p>
                  </div> -->
                </template>
              </div>
          </div>
        </div>
      <!-- type 为1 代表是已撤销 -->
      <template v-if="apps.type != 1">
        <div class="bottom-btns">
          <van-row>
            <!-- flownext.length > 0 代表不是最后一步 -->
            <template v-if="lastOne.pertype != '5'">
              <van-col :span="type == '0'?11:9">
                <van-button type="default" size="large" class="default-btn-class" @click="clickBack">撤 销</van-button>
              </van-col>
              <template v-if="lastOne.pertype == '2'">
                <van-col span="13" >
                  <van-button type="primary" size="large" @click="againSubmit">重新提交</van-button>
                </van-col>
              </template>
            </template>
            <!-- type=0 不能审批 -->
            <template v-if="type != '0'">
              <template v-if="currentStep == '1'">
                <van-col span="7">
                  <van-button type="warning" size="large" class="info-btn-calss" 
                  @click="recoverDelete">删 除</van-button>
                </van-col>
                <van-col span="7" offset="1">
                  <van-button type="info" size="large" class="info-btn-calss" 
                  @click="clickEdit">编 辑</van-button>
                </van-col>
              </template>
              <van-col span="13" offset="2">
              <template v-if="currentStep != '1' && lastOne.pertype != '2'">
                <van-button type="info" size="large" class="info-btn-calss" 
                @click="reminder()" :disabled="btnDisable">催 办</van-button>
              </template>
              </van-col>
            </template>
            <template v-else>
              <van-col span="13">
              <template v-if="currentStep != '1' && lastOne.pertype != '2' && lastOne.pertype != '5'">
                <van-button type="info" size="large" class="info-btn-calss" 
                @click="reminder()" :disabled="btnDisable">催 办</van-button>
              </template>
              </van-col>
            </template>
            
          </van-row>
        </div>
      </template> 

      <!-- 催办弹框 -->
      <van-popup v-model="reminderVisiable" position="bottom" :safe-area-inset-bottom="true"
      :close-on-click-overlay="false" class="multiple-user">
        <van-row class="next-row-class">
          <van-col :span="4" class="row-cancel" @click="reminderVisiable = false">取消</van-col>
          <van-col :span="16" class="row-title">催办人员</van-col>
          <van-col :span="4" class="row-confirm" @click="clickPress">确定</van-col>
        </van-row>
        <van-checkbox-group v-model="reminderCheck" style="padding-top: 52px;">
          <van-cell-group>
            <van-cell
              v-for="(item, index) in reminderData"
              clickable
              :key="item"
              :title="item"
              @click="toggle(index)"
            >
              <van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-popup> 
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        loading: false,
        apps: {}, //基本信息
        forms: [],//表单数据
        stepData: [],//流程步骤数据
        currentStep: "1",//当前步骤
        lastOne:{},      //编辑需要的数据
        flownext:[],      //下一步数据
        type: "",        //type 为 0 就不用审批
        btnDisable: false,   //催办disabled
        user_id:"" ,          //当前用户id
        remain_done: [],     //待办流程进度
        reminderVisiable: false,    //催办控制器
        reminderData:[],            //催办的数据
        reminderCheck:[],
        attachmentShow: false,   //流程附件是否显示
      }
    },
    activated() {
      this.$toast({
        type: "loading",
        message: "加载中...",
        forbidClick: true
      })
      this.loading = false
      this.apps = {},
      this.forms = [],
      this.stepData = [],
      this.type = "",
      this.flownext = [],
      this.btnDisable = false,   //催办disabled
      this.remain_done = [],     //待办流程进度
      this.reminderVisiable = false,    //催办控制器
      this.reminderData = [],            //催办的数据
      this.attachmentShow = false,
      this.currentStep = this.$route.query.step
      this.user_id = this.$store.state.userId
      this.$bridge.callHandler('navTitle',{title: "公文详情"})
      if(this.$route.query.from && this.$route.query.from == 'origin') {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          responseCallback('h5 done!')
        })
      }else {
        this.$bridge.callHandler('navBack')
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          this.$router.push({name: "myDocument"})
          responseCallback("go(-1)")
        })
      }

      this.getDetailInfo()
    },
    watch: {
      'reminderVisiable': {
        handler(newV, oldV) {
          if (this.reminderVisiable) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      }
    },
    methods: {
      /**
       * 用户信息
       * @return {[type]} [description]
       */
      checkIdCard(uid) {
        // console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      },
      fileName(url, type) {
        let fullName   = !url.split('@daxsdfcsgr6time666@')[1] ? url : url.split('@daxsdfcsgr6time666@')[1]
        let pointCount    = fullName.split('.').length
        let fileType      = fullName.split('.')[pointCount - 1]
        let fileTypeIndex = fullName.indexOf(fileType)
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
      /**
       * 预览-附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      preview(item) {
        // console.log(item)
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName: item.fromname || item
        })
        window.open(`${this.$common.filePath}${item}?filename=${item.fromname}`)
      },
      /**
       * 预览-流程附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewComFile(item,filename) {
        // console.log(item+filename)
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName: filename
        })
        window.open(`${this.$common.filePath}${item}?filename=${filename}`)
      },
      /**
       * 预览-正文
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewContent() {
        this.$bridge.callHandler('openNewView', {url: `${window.location.origin}/h5/#/richtext?appid=${this.apps.id}&userid=${this.$store.state.userId}&token=${this.$store.state.token}`})
      },
      /**
       * 详情页数据
       * @return {[type]} [description]
       */
      getDetailInfo () {
        let config = {
          method: "post",
          url: `${this.$common.basePath}documentlist.php`,
          data: {
            do: "documentlist",
            appsid: this.$route.query.id,
            tpltype: this.$route.query.type,
            type: "2",
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          this.apps = res.data.apps
          this.forms = res.data.from
          this.stepData = res.data.workclass
          if (this.stepData[0].file.length > 0) {
            this.attachmentShow = true
          }
          this.lastOne = res.data.lastone
          this.type = res.data.type
          this.flownext = res.data.flownext
          this.remain_done = res.data.remain_done

          // 流程图
          // if (this.apps.flow_img) {
          //   this.$bridge.callHandler('showProcessImg', {
          //     url: `${this.$common.filePath}${this.apps.flow_img}`
          //   })
          // }
          this.$bridge.callHandler('navRight', {title: "流程图"})
          this.$bridge.registerHandler('navRightClicked', (data, callBack)  => {
            this.$bridge.callHandler('openNewView', {url: `${window.location.origin}/h5/#/gojsChart?id=${this.apps.id}&type=1&userid=${this.$store.state.userId}&token=${this.$store.state.token}`})
          })
            
          this.$nextTick( _ => {
            this.loading = true
            setTimeout( _ => {
              this.$toast.clear()
            },100)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 撤销
       * @return {[type]} [description]
       */
      clickBack () {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: "警告",
          message: "撤销不可还原，是否确认撤销？"
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          let config = {
            method: "POST",
            url: `${this.$common.basePath}documentlist.php`,
            data: {
              do: "Listworkkey",
              appid: this.$route.query.id,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast({
              message:'撤销成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              this.getDetailInfo()
              // 初始化全部的 data数据
              Object.assign(this.$data, this.$options.data());
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2000)
          }).catch(err => {

          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 重新提交
       * @return {[type]} [description]
       */
      againSubmit() {
        this.$router.push({ name:"documentsForm", query:{ 
          tplid: this.apps.tplid, 
          appid: this.lastOne.appid, 
          flowid: this.lastOne.flowid,
          perid: this.lastOne.perid,
          tpltype: this.apps.tpltype,
          status: "again"} })
      },
      /**
       * 编辑
       * @return {[type]} [description]
       */
      clickEdit () {
        this.$router.push({ name:"documentsForm", query:{ 
          tplid: this.apps.tplid, 
          appid: this.lastOne.appid, 
          flowid: this.lastOne.flowid,
          perid: this.lastOne.perid,
          tpltype: this.apps.tpltype,
          status: "edit"} })
      },
      toggle(index) {
        this.$refs.checkboxes[index].toggle();
      },
      /**
       * 催办弹框
       */
      reminder() {
        let signs = []
        // 筛选未办理的数据
        for (var i = 0; i < this.lastOne.actf.length; i++) {
          if (this.lastOne.actf[i].pertype == '0' || this.lastOne.actf[i].pertype == "4") {
            signs.push(this.lastOne.actf[i].name)
          }
        }
        if (signs && signs.length > 0) {
          this.reminderData = signs
        } else {
          // 委托人或主办人
          if (this.lastOne.entrust) {
            this.reminderData = this.lastOne.entrust.split(",")
          } else {
            // 没有委托人就取主办人
            if (this.lastOne.query.length > 0) {
              let zhuban = []
              for (var i = 0; i < this.lastOne.query.length; i++) {
                if (this.lastOne.query[i].pertype == '0' || this.lastOne.query[i].pertype == "4") {
                  zhuban.push(this.lastOne.query[i].name)
                }
              }
              this.reminderData = zhuban
            }else {
              this.reminderData = this.lastOne.name.split(",")
            }
          }
        }
        // console.log(this.reminderData)
        this.reminderVisiable = true
      },
      /**
       * 催办
       * @return {[type]} [description]
       */
      clickPress () {
        // console.log(this.reminderCheck);
        let msg = '催办将会发短信提醒，是否确认？'
        if (this.reminderCheck.length <= 1 && this.reminderCheck.length > 0) {
          msg = '催办将会给 ' + this.reminderCheck[0] + ' 发短信提醒，是否确认？' 
        } else if (this.reminderCheck.length > 1 && this.reminderCheck.length <= 2) {
          msg = '催办将会给 ' + this.reminderCheck[0] + "," + this.reminderCheck[1] + '发短信提醒，是否确认？'
        } else if (this.reminderCheck.length > 1 && this.reminderCheck.length <= 3) {
          msg = '催办将会给 ' + this.reminderCheck[0] + "," + this.reminderCheck[1] + ',' + this.reminderCheck[2] +' 发短信提醒，是否确认？'
        }  else if (this.reminderCheck.length > 3) {
          msg = '催办将会给 ' + this.reminderCheck[0] + ' 等发短信提醒，是否确认？' 
        }
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: msg
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          let config = {
            method: "POST",
            url: `${this.$common.basePath}workclass_msg.php`,
            data: {
              workid: this.$route.query.id,
              user_id: this.$store.state.userId,
              names: this.reminderCheck,
              type: 2    //1 审批，2公文
            }
          }
          this.$axios(config).then(res => {
            this.$toast({
              message: '短信发送成功',
              forbidClick: true,
              duration: 1500
            })
            this.reminderVisiable = false
          }).catch(err => {
            this.$toast(err.msg)
            this.reminderVisiable = false
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 删除
       * @return {[type]} [description]
       */
      recoverDelete () {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title:'警告',
          message: '是否确认删除该流程？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          let config = {
            method: "post",
            url: `${this.$common.basePath}documentlist.php`,
            data: {
              do: "delete",
              user_id: this.$store.state.userId,
              appsid: this.apps.id
            }
          }
          this.$axios(config).then(res => {
            this.$toast({
              message: '删除成功',
              forbidClick: true,
              duration: 1500
            })
            setTimeout(_ => {
              this.$toast({
                duration: 500,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1500)
            setTimeout(_ => {
              this.$router.push({name: "myDocument"})
              // 初始化全部的 data数据
              Object.assign(this.$data, this.$options.data());
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2000)
          }).catch(err => {
            this.$toast(err.msg)
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 返回样式类名
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      getTypeclass(type) {
        let typeclass = ''
        switch(type) {
          case '0'://办理中
            typeclass = 'ing-color'
            break;
          case '1'://通过
            typeclass = 'pass-color'
            break;
          case '2'://拒绝
            typeclass = 'defined-color'
            break;
          case '3'://退回
            typeclass = 'defined-color'
            break;
          case '4'://等待办理中
            typeclass = 'ing-color'
            break;
          case '5'://结束
            typeclass = 'defined-color'
            break;
          default:
            typeclass = 'defined-color'
        }
        return typeclass;
      },
      getTypename(type) {
        let typename = ""
        switch(type) {
          case '0':
            typename = '办理中'
            break;
          case '1':
            typename = '通过'
            break;
          case '2':
            typename = '拒绝'
            break;
          case '3':
            typename = '退回'
            break;
          case '4':
            typename = '等待办理中'
            break;
          case '5'://结束
            typename = '结束'
          default:
            typename = '结束'
        }
        return typename;
      },
    }
  }
</script>

<style type="text/css" lang="less" scoped> 
  p{
    margin: 0;
  }
  .margin-t-10 {
    margin-top: 10px;
  }
  .margin-b-10 {
    margin-bottom: 10px;
  }
  .padding-b-12 {
    padding-bottom: 12.5px;
  }
  .margin-l-15 {
    margin-left: 15px;
  }
  .margin-r-10 {
    margin-right: 6px;
  }
  .padding-b-54 {
    padding-bottom: 80px;
  }
  .padding-tb-10:first-child{
    padding-top: 10px;
  }
  .padding-tb-10:last-child {
    padding-bottom: 10px;
  }
  .nav-content {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-content-height {
    height: calc(100vh - 54px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  // head-info 开始
  .head-info {
    background-color: #fff;
    padding: 15px;
    width: calc(100vw - 30px);
  }
  .head-img {
    width: 46px;
    height: 46px;
    border-radius: 4px;
  }
  .head-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .head-title{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 5px;
    width: 100%;
  }
  .head-desc {
    color: #999999;
    font-size: 14px;
  }
  // head-info 结束
  // 中间表单部分 开始
  .van-cell {
    padding: 1px 15px;
  }
  .cell-left {
    color: #999999;
    font-size: 15px;
    max-width: 63px;
    text-align: right;
    padding-right: 15px;
    line-height: 18px;
    // display: flex;
    // align-items:center;
    // justify-content: flex-end;
  }
  .cell-right {
    text-align: left;
    color: #333333;
    font-size: 15px;
    line-height: 18px;
  }
  .img-class {
    width: 20px;
    height: 23px;
    margin-right: 10px;
  }
  .form-file {
    background-color: #F5F5F5;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 12px;
    line-height: normal;
  }
  // 中间表单部分 结束
  // 下一步流程设定 样式结束
  .progress {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #999999;
  }
  // van-card 开始
  .van-card__thumb {
    width: auto;
    height: auto;
    margin-right: 15px;
  }
  .van-card__content{
    padding-bottom: 15px;
    border-bottom: 1px solid #F5F5F5;
  }
  .van-card {
    margin-top: 0!important;
    background-color: #fff!important;
    padding: 15px 15px 0 15px;
  }
  .title-class {
    font-size: 17px;
    color: #333333;
    font-weight: bold;
  }
  .desc-info-class {
    font-size: 14px;
    color: #999999;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .desc-content {
    padding: 10px 15px;
    background-color: #F5F5F5;
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    border-radius: 4px;
  }
  // van-card 结束
  // 底部按钮
  .bottom-btns {
    padding: 2px 15px;
    width: calc(100vw - 30px);
    background-color: #fff;
    margin-top: 6px;
    position: fixed;
    bottom: 0;
    z-index: 6;
  }
  .default-btn-class {
    border: none;
    color: #2E79FF;
  }

  .flex-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .font-color {
    font-size: 14px;
    font-weight: bold;
    color: #F5A703;
  }
  .file-flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  .next-row-class {
      max-height: 22px;
      height: 22px;
      padding: 15px;
      width: calc(100vw - 30px);
      border-bottom: 1px solid #F5F5F5;
    }
    .row-cancel {
      font-size: 17px;
      color: #333333
    }
    .row-title{
      font-size: 17px;
      color: #333333;
      font-weight: bold;
      text-align: center;
    }
    .row-confirm {
      font-size: 17px;
      color: #2E79FF;
      text-align: right;
    }
  .flow-img {
    z-index: 3;
    display: inline-block;
    position:absolute;
    left:0px;
    top:0px;

    img{
      z-index:5;
      width: 40px;
      height: 40px;
    }
    .process-img {
      z-index:5;
      width: 40px;
      height: 40px;
    }
    .process-border-img {
      z-index:5;
      width: 36px;
      height: 36px;
      border: 2px solid #fff;
    }
  }
</style>
<style type="text/css" lang="less">
  #docDetail {
    .van-cell-group {
      .van-cell {
        padding: 5px 15px;
        line-height: normal;
      }
    }
    // 多人审批办理人员
    .multiple-user {
      max-height: 60vh;
      min-height: 40vh;

      .next-row-class {
        position:fixed;
        background-color: #fff;
        z-index: 9;
      }

      .van-search {
        padding-top: 63px;
      }
    }
  }
</style>